﻿<!DOCTYPE html>
<html>
<head>
    <title>闪道简易新闻</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/pullToRefresh.css" />
    <link rel="stylesheet" href="./style/style.css" />
    <script src="./js/jquery-2.1.1.js"></script>    
    <script src="./js/iscroll.js"></script>
    <script src="./js/pullToRefresh.js"></script>
</head>
<body>

   <div class="type-select">
       <ul>
           <li class="active" data-type='wxnew'>微信精选</li>
           <li data-type='social'>社会</li>
           <li data-type='tiyu'>体育</li>
           <li data-type='meinv'>美女</li>
           <li data-type='huabian'>娱乐八卦</li>
       </ul>    
   </div>
    <div id="wrapper">
        <ul>

        </ul>
    </div>
    <script>

        // 初始化变量
        var typeList = {
            wxnew: '微信精选',
            social: '社会',
            tiyu: '体育',
            meinv: '美女',
            huabian: '娱乐八卦',
        }

        var type = 'wxnew';
        var num = 10;
        var page = 0;

        // 设置容器高度（减去tab高度）
        $('#wrapper')[0].style.height = $(window).height() - 40 + 'px';

        // 更换新闻类型
        $('.type-select li').on('click', function() {
            // 改变tab样式
            $('.active').removeClass('active');
            $(this).addClass('active');
            // 回复页码
            page = 0;
            // 切换类型
            type = $(this).data('type');
            // 加载当前类型新闻
            loadNews(type, num, page, true);
        });

        /*
        * 请求新闻
        */
        loadNews = function(type, num, page, reload) {

            // $.get('http://www.shandao.space/getNews?type=' + type + '&num=' + num + '&page=' + page, {}, function(data) {

                var data = [
                    {
                        "id":15371,
                        "type":"wxnew",
                        "title":"丈夫和儿子相继重病 邻居“偷偷”筹款献爱心",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239929161/641",
                        "url":"http://news.qq.com/a/20170310/012657.htm",
                        "ctime":"2017-03-10 09:33:44"
                    },
                    {
                        "id":15358,
                        "type":"wxnew",
                        "title":"河南一小学新生面试要求带父母学历证 称只作参考",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1238055779/641",
                        "url":"http://news.qq.com/a/20170310/012113.htm",
                        "ctime":"2017-03-10 09:26:27"
                    },
                    {
                        "id":15350,
                        "type":"wxnew",
                        "title":"川大86岁教授学无止境：每天泡图书馆坚持20年",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239839138/641",
                        "url":"http://news.qq.com/a/20170310/010690.htm",
                        "ctime":"2017-03-10 09:07:34"
                    },
                    {
                        "id":15326,
                        "type":"wxnew",
                        "title":"保安父亲欲捐肾救女 30万元手术费愁坏一家人",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239727617/641",
                        "url":"http://news.qq.com/a/20170310/009027.htm",
                        "ctime":"2017-03-10 08:44:31"
                    },
                    {
                        "id":15294,
                        "type":"wxnew",
                        "title":"女子砍断3岁儿子右腿被采取强制措施 断肢成功对接",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239596388/641",
                        "url":"http://news.qq.com/a/20170310/005099.htm",
                        "ctime":"2017-03-10 07:34:45"
                    },
                    {
                        "id":15282,
                        "type":"wxnew",
                        "title":"男子用纸片遮挡车牌 写挑衅交警话语被处罚",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239485889/641",
                        "url":"http://news.qq.com/a/20170310/003112.htm",
                        "ctime":"2017-03-10 06:40:37"
                    },
                    {
                        "id":15280,
                        "type":"wxnew",
                        "title":"为照顾瘫痪父亲 “最美中学生”每天奔跑10公里",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239529923/641",
                        "url":"http://news.qq.com/a/20170310/003012.htm",
                        "ctime":"2017-03-10 06:34:29"
                    },
                    {
                        "id":15220,
                        "type":"wxnew",
                        "title":"前波兰总理图斯克连任欧洲理事会主席 任期30个月",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/590497216/641",
                        "url":"http://news.qq.com/a/20170310/001631.htm",
                        "ctime":"2017-03-10 03:33:46"
                    },
                    {
                        "id":15215,
                        "type":"wxnew",
                        "title":"女子奔着中大奖登录彩票预测网 被骗7597元",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239431568/641",
                        "url":"http://news.qq.com/a/20170310/001396.htm",
                        "ctime":"2017-03-10 02:59:58"
                    },
                    {
                        "id":15216,
                        "type":"wxnew",
                        "title":"吉林大学公寓成危楼只搬走一半人 校方：局部问题",
                        "description":"社会最新",
                        "picUrl":"http://inews.gtimg.com/newsapp_bt/0/1239025956/641",
                        "url":"http://news.qq.com/a/20170310/001370.htm",
                        "ctime":"2017-03-10 02:52:39"
                    }
                ];



                if (reload) {
                    // 重新加载的新闻的场合
                    $("#wrapper ul").empty();
                }

                $(data).each(function(index, element) {
                    // 像列表中添加新闻
                    $("#wrapper ul").append(`<li><a href='` + element.url + `'>
                                                <img src="` + element.picUrl + `" alt='图片加载中'>
                                                <div>
                                                    <p class="concent">` + element.title + `</p>
                                                    <small class="type"> ` + typeList[element.type] + ` </small>
                                                    <small class="time"> ` + element.ctime + ` </small>
                                                </div>                
                                            </a></li>`);
                });
           
                // 关闭loading动画
                wrapper.refresh();

            // }, 'json');
        }


        // 初始化下拉刷新上托加载更多控件
        refresher.init({
            id: "wrapper",
            pullDownAction: Refresh,
            pullUpAction: Load
        });

        function Refresh() {
            // 刷新新闻列表
            setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
                page = 0;
                loadNews(type, num, page, true);
            }, 500);
        }

        function Load() {
            setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
                page++;
                loadNews(type, num, page, false);
            }, 500);
        }

        // 初期化新闻加载
        loadNews(type, num, page, true);
    </script>

</body>
</html>